<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 1200px;
            /* margin: 0 auto; */
        }
        ul{
            width: 1200px;
            list-style: none;
        }
        li{
            float: left;
            width: 276px;
            height: 434px;
            border: 1px dashed #f8f8f8;
        }
        li img{
            /* display:inline-block; */
            width: 276px;
            height: 210px;
        }
        li h2{
            font-size: 20px;
        }
        li p{
            font-size: 16px;
            line-height: 16px;
        }
        li p:nth-child(4){
            text-decoration: line-through;
        }
        li p:nth-child(5){
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <h1>根据数据生成一个商品列表</h1>
        <button id="jiaGe">根据价格排序</button>
        <button id="xiaoLiang">根据销量排序</button>
        <button id="pingJia">根据评价排序</button>
        <ul id="list">

        </ul>
    </div>

    <script>
        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];
        //给列表添加内容
        for (var i = 0; i < data.length; i++) {
            list.innerHTML += '<li>' +
                '<img src = "' + data[i].imgurl + '" alt = " ">' +
                '<h2>' +  data[i].name + '</h2>' +
                '<p>颜色：' + data[i].color + '</p>' +
                ' <p>原价：' + data[i].price + '</p>' +
                ' <p>现价：' + data[i].sale + '</p>' +
                ' <p>销量：' + data[i].evaluate + '</p>' +
                ' <p>评论：' + data[i].sales + '</p>' +
                '</li>';
            }
        //添加点击事件
        jiaGe.onclick = function(){
            // 清空
            list.innerHTML = ''
            // 排序
            data.sort(function (a, b) {
                return b.sale - a.sale
            })

            for (var i = 0; i < data.length; i++) {
                list.innerHTML += '<li>' +
                    '<img src = "' + data[i].imgurl + '" alt = " ">' +
                    '<h2>' +  data[i].name + '</h2>' +
                    '<p>颜色：' + data[i].color + '</p>' +
                    ' <p>原价：' + data[i].price + '</p>' +
                    ' <p>现价：' + data[i].sale + '</p>' +
                    ' <p>销量：' + data[i].evaluate + '</p>' +
                    ' <p>评论：' + data[i].sales + '</p>' +
                    '</li>';
            }
        }
        // 添加点击事件
        xiaoLiang.onclick = function(){
            //清空
            list.innerHTML = ''
            //设置排序
            data.sort(function (a, b) {
                return b.evaluate - a.evaluate
            })

            for (var i = 0; i < data.length; i++) {
                list.innerHTML += '<li>' +
                    '<img src = "' + data[i].imgurl + '" alt = " ">' +
                    '<h2>' +  data[i].name + '</h2>' +
                    '<p>颜色：' + data[i].color + '</p>' +
                    ' <p>原价：' + data[i].price + '</p>' +
                    ' <p>现价：' + data[i].sale + '</p>' +
                    ' <p>销量：' + data[i].evaluate + '</p>' +
                    ' <p>评论：' + data[i].sales + '</p>' +
                    '</li>';
            }
        }
        // 添加点击事件
        pingJia.onclick = function(){
            // 清空
            list.innerHTML = ''
            // 拍寻
            data.sort(function (a, b) {
                return b.sales - a.sales
            })

            for (var i = 0; i < data.length; i++) {
                list.innerHTML += '<li>' +
                    '<img src = "' + data[i].imgurl + '" alt = " ">' +
                    '<h2>' +  data[i].name + '</h2>' +
                    '<p>颜色：' + data[i].color + '</p>' +
                    ' <p>原价：' + data[i].price + '</p>' +
                    ' <p>现价：' + data[i].sale + '</p>' +
                    ' <p>销量：' + data[i].evaluate + '</p>' +
                    ' <p>评论：' + data[i].sales + '</p>' +
                    '</li>';
            }
        }
    </script>
</body>
</html>